<template>
     <div>
        <div style="height:86px;
background:rgba(251,244,244,1);
display:flex;
flex-direction: column;
border-radius:4px;">
          <span style="color:#FB5555;margin-top:19px;margin-left:20px;">温馨提示：</span>
          <span style="color:#FB5555;margin-left:19px;margin-top:15px;">商家发布任务需要购买萌点做为给买手、商家购买的萌点不能当余额使用、也不可提现、商家只能在平台消费。
</span>
        </div>
         <div>
            <p style="color: #333333;font-size: 17px;margin-top:40px;">1.选择萌点包</p>
           <div style="display:flex;">
             <div class="tabs" v-for="(i,index) in list" @click="tab(index)" :class="{actives : index===curId}" :key="index">
               <span style="width:100%;color:#999999;display: block;margin-top:13px;margin-left:52px;">{{i.name}}</span>
               <p style="width:25%;color:#999999;margin:4px auto;display: block;">{{i.idx}}</p>
             </div>
           </div>
         </div>
          <div style="display: flex;flex-direction: column;">
            <div style="display: flex;align-items:center;">
              <span style="color: #333333;display:block;font-size: 17px;margin-top:40px;">2.支付</span>
              <span style="color: #333333;display:block;font-size: 14px;margin-top:40px;margin-left:6px;letter-spacing:1px;">(选择方式当前押金足够支付，若需要使用网银支付方式，请先取消选择使用押金支付)</span>
            </div>
            <el-radio-group v-model="radio2" style="margin-top:42px;margin-left:30px;">
              <el-radio :label="3">余额充值</el-radio>
              <el-radio :label="6">银行卡充值</el-radio>
              <el-radio :label="9">支付宝充值</el-radio>
            </el-radio-group>
            <el-button type="primary" style="margin-top:50px;width:260px;height:40px;margin-left:10px;">确认付款</el-button>
          </div>
     </div>
</template>

<script>
    export default {
        name: "Purchase_point",
        data(){
            return{
              radio2: 3,
              curId: 0,
                list:[
                  {name:'100萌点体验包',idx:"100元"},
                  {name:'500萌点体验包',idx:"500元"},
                  {name:'1000萌点体验包',idx:"1000元"},
                  {name:'2000萌点体验包',idx:"2000元"},
                ]
            }
        },
        methods:{
          tab(index){
            console.log(index);
            this.curId = index;
            console.log(this.curId,'111');
          }
        }
    }
</script>

<style>
.tabs{
  width:208px;
  height:72px;
  background:rgba(255,255,255,1);

  border:2px solid rgba(202,202,202,1);
  display: flex;
  cursor: pointer;
  margin-left:29px;
  flex-direction: column;
  border-radius:4px;
}
  .actives{
    background:url('../../assets/menhuang.png') no-repeat;
    background-size:100% 100%;
    border:0 solid rgba(202,202,202,1);
  }
</style>
